 
 <template>
  <v-container>
    <v-row style="width:1160px">
      <v-alert
        dense
        type="info"
        min-width="960px"
        color="blue accent-2"
        class="mt-2 ml-6"
        dismissible
      >
        通知：为提升附件提使用体验，问卷附件存储空间容量有原单份问卷500M升级为个人所有问卷共享2G，请知悉
      </v-alert>
    </v-row>
    <v-row class="mt-6">
      <div class="ml-6"><strong>个人问卷</strong></div>
      <v-spacer></v-spacer>
      <v-btn-toggle borderless>
        <v-btn
          height="30"
          width="25"
          :color="btn_color"
          icon
          @click="btn_color='blue'"
        >
          <v-icon>mdi-grid-large</v-icon>
        </v-btn>
        <v-btn
          width="25"
          height="30"
          :color="btn_color"
          icon
          @click="btn_color='blue'"
        >
          <v-icon>mdi-format-list-bulleted</v-icon>
        </v-btn>
      </v-btn-toggle>
    </v-row>
    <v-row class="ml-6 mt-12">
      <v-simple-table style="width:1200px">
        <thead style="background-color:rgb(248, 248, 255);width:960px">
          <tr>
            <th>文件夹/问卷名称</th>
            <th>状态</th>
            <th>回收量</th>
            <th>ID</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作</th>
            <th>更多功能</th>
          </tr>
        </thead>
        <tbody style="background-color:white;">

          <tr
            v-for="item in questionnaire_info"
            :key="item.name"
          >

            <td>
              <v-btn
                text
                route
                to="/home/preview"
              >{{item.name}}</v-btn>
            </td>
            <td>{{item.state}}</td>
            <td>{{item.recovery}}</td>
            <td>{{item.ID}}</td>
            <td>{{item.creation_time}}</td>
            <td>{{item.update_time}}</td>
            <td>
              <v-tooltip bottom>
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    text
                    class="blue--text"
                    @click.stop="dialog = true;recovery_name=item.name"
                    v-bind="attrs"
                    v-on="on"
                  >{{item.operation[0]}}
                  </v-btn>
                </template>
                <span>问卷回收</span>
              </v-tooltip>
              <v-tooltip bottom>
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    text
                    class="blue--text"
                    v-bind="attrs"
                    v-on="on"
                  >{{item.operation[1]}}</v-btn>
                </template>
                <span>编辑</span>
              </v-tooltip>
              <v-tooltip bottom>
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    text
                    class="blue--text"
                    v-on="on"
                    v-bind="attrs"
                  >{{item.operation[2]}}</v-btn>
                </template>
                <span>统计</span>
              </v-tooltip>
            </td>
            <td>
              <v-btn
                text
                icon
              >
                <v-icon>{{item.more_features}}</v-icon>
              </v-btn>
            </td>
          </tr>
        </tbody>
      </v-simple-table>
      <v-dialog
        v-model="dialog"
        max-width="290"
      >
        <v-card>
          <v-card-title class="headline">
            开始回收
          </v-card-title>

          <v-card-text>
            开始回收{{recovery_name}}吗？
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn
              color="green darken-1"
              text
              @click="dialog = false"
            >
              取消
            </v-btn>

            <v-btn
              color="green darken-1"
              text
              @click="dialog = false"
            >
              确定
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </v-container>
</template>

import 

 <script>

export default ({

  data: () => ({
    dialog: false,
    drawer: null,
    mini: false,
    recovery_name: '',
    btn_color: "white",
    items: [
      { icon: 'mdi-file', text: '个人问卷' },
      { icon: 'mdi-delete-outline', text: '回收站' },

    ],

    questionnaire_info: [
      {
        name: "购物网用户满意度调查",
        state: "暂停",
        recovery: "0",
        ID: "87236",
        creation_time: "2021-04-03",
        update_time: "2021-05-02",
        operation: ["回收", "编辑", " 统计"],
        more_features: "mdi-dots-horizontal",
      },
    ]
  }),
})
 </script>